import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
// --------------------------------------------//
import '../../provider/userProv.dart' show UserProvider;
// --------------------------------------------//
import '../create/createHeader.dart' show ProfileAvatar, UserName;
import './userProfile.dart' show UserProfile;
import '../create/createBecomeCreator.dart' show BecomeCreator;
//--------------

class UserMain extends StatelessWidget {
  const UserMain({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 背景图层
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 280.h, // 背景图高度
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.fill,
                image: AssetImage('assets/imgs/img_create_bg.png'),
              ),
            ),
          ),
        ),
        // 用户头像和名字
        Positioned(
          top: 92.h, // 距离屏幕顶端92px
          left: 0,
          right: 0,
          child: Column(
            children: [
              // 用户头像 - 60*60
              Container(
                width: 60.w,
                height: 60.h,
                child: const ProfileAvatar(),
              ),
              SizedBox(height: 4.h), // 头像和名字间隔4px
              // 用户名
              const UserName(),
            ],
          ),
        ),
        // 表单内容 - 距离屏幕上方221px，在背景图上方
        Positioned(
          top: 221.h, // 距离屏幕上方221px
          left: 0,
          right: 0,
          bottom: 0,
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.only(left: 10, right: 10, bottom: 6),
              child: Material(
                elevation: 4,
                borderRadius: BorderRadius.circular(12),
                color: const Color.fromRGBO(17, 17, 17, 1),
                child: const Column(
                  children: [
                    ProfileLine(),
                    DividerLine(),
                    MyFollowLine(),
                    DividerLine(),
                    FavoriteLine(),
                    DividerLine(),
                    LikesLine(),
                    DividerLine(),
                    BecomeCreatorLine(),
                    DividerLine(),
                    GeneralSettingLine(),
                    DividerLine(),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class DividerLine extends StatelessWidget {
  const DividerLine({super.key});

  @override
  Widget build(BuildContext context) {
    return const Opacity(
        opacity: 0.1,
        child: SizedBox(
          width: 359,
          child: Divider(
              height: 0.5, // Controls the thickness of the divider line
              thickness: 0.5,
              color: Colors.white),
        ));
  }
}

class ProfileLine extends StatelessWidget {
  const ProfileLine({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        // Navigation to subpage
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => UserProfile()),
        );
      },
      title: Text(
        'Profile',
        style: TextStyle(
          fontSize: 16,
          letterSpacing: -0.41,
          fontFamily: 'Poppins',
          fontWeight: FontWeight.w500,
          color: Color.fromRGBO(255, 255, 255, 1),
        ),
      ),
      trailing: Icon(
        Icons.chevron_right,
        color: Color.fromRGBO(255, 255, 255, 1),
      ),
    );
  }
}

class MyFollowLine extends StatelessWidget {
  const MyFollowLine({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      // onTap: () {
      //   // Navigation to subpage
      //   Navigator.push(
      //     context,
      //     MaterialPageRoute(builder: (context) => const UerProfile()),
      //   );
      // },
      title: Text(
        'My Follow',
        style: TextStyle(
          fontSize: 16,
          letterSpacing: -0.41,
          fontFamily: 'Poppins',
          fontWeight: FontWeight.w500,
          color: Color.fromRGBO(255, 255, 255, 1),
        ),
      ),
      // trailing: Icon(
      //   Icons.chevron_right,
      //   color: Color.fromRGBO(255, 255, 255, 1),
      // ),
    );
  }
}

class FavoriteLine extends StatelessWidget {
  const FavoriteLine({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      // onTap: () {
      //   // Navigation to subpage
      //   Navigator.push(
      //     context,
      //     MaterialPageRoute(builder: (context) => const UerProfile()),
      //   );
      // },
      title: Text(
        'Favorite',
        style: TextStyle(
          fontSize: 16,
          letterSpacing: -0.41,
          fontFamily: 'Poppins',
          fontWeight: FontWeight.w500,
          color: Color.fromRGBO(255, 255, 255, 1),
        ),
      ),
      // trailing: Icon(
      //   Icons.chevron_right,
      //   color: Color.fromRGBO(255, 255, 255, 1),
      // ),
    );
  }
}

class LikesLine extends StatelessWidget {
  const LikesLine({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      // onTap: () {
      //   // Navigation to subpage
      //   Navigator.push(
      //     context,
      //     MaterialPageRoute(builder: (context) => const UerProfile()),
      //   );
      // },
      title: Text(
        'Likes',
        style: TextStyle(
          fontSize: 16,
          letterSpacing: -0.41,
          fontFamily: 'Poppins',
          fontWeight: FontWeight.w500,
          color: Color.fromRGBO(255, 255, 255, 1),
        ),
      ),
      // trailing: Icon(
      //   Icons.chevron_right,
      //   color: Color.fromRGBO(255, 255, 255, 1),
      // ),
    );
  }
}

class BecomeCreatorLine extends StatelessWidget {
  const BecomeCreatorLine({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        // Navigation to subpage
        Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => const BecomeCreator(
                    sourceIndex: 3,
                  )),
        );
      },
      title: Text(
        'Become A Creator',
        style: TextStyle(
          fontSize: 16,
          letterSpacing: -0.41,
          fontFamily: 'Poppins',
          fontWeight: FontWeight.w500,
          color: Color.fromRGBO(255, 255, 255, 1),
        ),
      ),
      trailing: Icon(
        Icons.chevron_right,
        color: Color.fromRGBO(255, 255, 255, 1),
      ),
    );
  }
}

class GeneralSettingLine extends StatelessWidget {
  const GeneralSettingLine({super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      // onTap: () {
      //   // Navigation to subpage
      //   Navigator.push(
      //     context,
      //     MaterialPageRoute(builder: (context) => const UerProfile()),
      //   );
      // },
      title: Text(
        'General Settings',
        style: TextStyle(
          fontSize: 16,
          letterSpacing: -0.41,
          fontFamily: 'Poppins',
          fontWeight: FontWeight.w500,
          color: Color.fromRGBO(255, 255, 255, 1),
        ),
      ),
      // trailing: Icon(
      //   Icons.chevron_right,
      //   color: Color.fromRGBO(255, 255, 255, 1),
      // ),
    );
  }
}
